<!DOCTYPE html>
<html>
<head lang="zh">
    <meta charset="UTF-8">
    <meta name="author" content="Weilin Shi">
    <title>测试</title>
    <link rel="stylesheet" href="css/style.css"/>
    <script src="./assets/jquery-2.1.3.min.js"></script>
    <script src="assets/component.js"></script>
</head>
<body style="overflow: auto" class="or-change">
<div id="container" style="width: 640px;margin: 60px auto">

    <a class="button primary large" href="#"  onclick="window.location=&quot;view-source:&quot; + window.location.href">
        查看源码
    </a>

    <div>
        <label>红色
            <input type="checkbox"/>
        </label>
        <label>蓝色
            <input type="checkbox"/>
        </label>
        <label>绿色
            <input type="checkbox"/>
        </label>
    </div>
    <div>
        <label>曹操
            <input type="radio" name="radio"/>
        </label>
        <label>刘备
            <input type="radio" name="radio"/>
        </label>
        <label>孙权
            <input type="radio" name="radio"/>
        </label>
    </div>

    <div class="grid-container">

        <div class="grid">
            <div class="col col-7-12">
                <label>步骤名称
                    <input name="step_name">
                </label>
            </div>
            <div class="col col-3-12">
                <label>步骤添加时间
                    <input name="date" readonly="">
                </label>
            </div>
            <div class="col col-2-12">
                <label contenteditable="" class="last">作者
                    <input name="author" readonly="">
                </label>
            </div>
        </div>

        <div class="grid">
            <div class="col col-2-12">
                <label>步骤类型
                    <select name="step_type">
                        <option value="Delay">延迟步骤</option>
                        <option value="Event">事件步骤</option>
                        <option value="Stepby">单步</option>
                    </select>
                </label>
            </div>
            <div class="col col-10-12">

                <label>延迟
                    <input name="delay">
                    <span class="caption">毫秒</span>
                </label>

            </div>
        </div>

        <div class="grid grid-flexible align-bottom">
            <div class="col">
                <label>操作对象
                    <input id="object" name="object"><span class="caption" id="path-result">0</span>
                </label>
            </div>
            <div class="col col-minimal">
                <a class="button primary ico search" id="catch">
                </a>
            </div>
        </div>

        <div class="grid">
            <div class="col col-3-12">
                <label>触发动作
                    <select name="action">
                        <option value="click">点击</option>
                        <option value="dblclick">双击</option>
                        <option value="mousedown">按下鼠标按键</option>
                        <option value="mouseup">抬起鼠标按键</option>
                        <option value="mousemove">鼠标移动</option>
                        <option value="mouseenter">鼠标穿入</option>
                        <option value="mouseleave">鼠标穿出</option>
                        <option value="mouseout">鼠标out穿过</option>
                        <option value="mouseover">鼠标over穿过</option>

                        <option value="val">赋值</option>
                        <option value="blur">焦点丢失</option>
                        <option value="focus">焦点聚集</option>
                        <option value="change">内容改变</option>

                        <option value="keydown">按下键盘按键</option>
                        <option value="keyup">抬起键盘按键</option>
                        <option value="keypress">键盘敲击</option>

                        <option value="select">选择文本</option>
                        <option value="submit">表单提交</option>
                    </select>
                </label>
            </div>

            <div class="col col-9-12">
                <label>动作参数
                    <input disabled="">
                </label>
            </div>

        </div>

        <div class="grid">
            <label>步骤注释
                <textarea name="comment"></textarea>
            </label>
        </div>
    </div>

    <div class="row">
        <ul class="toolbar right">
            <li class="button success large" id="append" title="追加">
                追加
            </li>
            <li class="button warning large bar-close" id="cancel" title="取消">
                取消
            </li>
        </ul>
    </div>

    <section class="tabs">

        <ul class="tab-nav">
            <li><a href="#">First Tab</a></li>
            <li class="active"> <a href="#">Second Tab</a></li>
            <li><a href="#">Third Tab</a></li>
        </ul>

        <div class="tab-content">
            <p>Here's the first piece of content</p>
        </div>
        <div class="tab-content active">
            <p>My tab is active so I'll show up first! Inb4 tab 3!</p>
        </div>
        <div class="tab-content">
            <p>Don't forget about me! I'm tab 3!</p>
        </div>

    </section>

    <section class="vertical tabs">

        <ul class="tab-nav">
            <li><a href="#">选项1</a></li>
            <li class="active"> <a href="#">选项2</a></li>
            <li><a href="#">选项3</a></li>
        </ul>

        <div class="tab-content">
            <p>第11111111111111</p>
        </div>
        <div class="tab-content active">
            <p>2222222222哇哈哈哈哈哈</p>
        </div>
        <div class="tab-content">
            <p>333333333333小33333333333</p>
        </div>

    </section>

    <table>
        <thead>
            <tr>
                <td>#</td>
                <td>个百分点</td>
                <td>小图标</td>
            </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>啊大大说</td>
            <td>
                <span class="ico-s-delete"></span>
                <span class="ico-s-up"></span>
                <span class="ico-s-down"></span>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>二位</td>
            <td></td>
        </tr>
        <tr>
            <td>3</td>
            <td>郭汝瑰</td>
            <td></td>
        </tr>
        <tr>
            <td>4</td>
            <td>羊肉汤</td>
            <td></td>
        </tr>
        <tr>
            <td>5</td>
            <td>元将投入</td>
            <td></td>
        </tr>
        <tr>
            <td>6</td>
            <td>而未若天下马也</td>
            <td></td>
        </tr>
        <tr>
            <td>7</td>
            <td>让他很让他很</td>
            <td></td>
        </tr>
        </tbody>
    </table>

    <fieldset>
        <legend>哇哈哈哈</legend>
    </fieldset>

    <nav>
        <ul class="pagination">
            <li><a href="#">&laquo;</a></li>
            <li><a href="#">1</a></li>
            <li class="active"><a href="#">2</a></li>
            <li class="disabled"><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">&raquo;</a></li>
        </ul>
    </nav>

    <pre>
         &lt;nav>
             &lt;ul class="pagination">
                 &lt;li>&lt;a href="#">&laquo;&lt;/a>&lt;/li>
                 &lt;li>&lt;a href="#">1&lt;/a>&lt;/li>
                 &lt;li class="active">&lt;a href="#">2&lt;/a>&lt;/li>
                 &lt;li class="disabled">&lt;a href="#">3&lt;/a>&lt;/li>
                 &lt;li>&lt;a href="#">4&lt;/a>&lt;/li>
                 &lt;li>&lt;a href="#">5&lt;/a>&lt;/li>
                 &lt;li>&lt;a href="#">&raquo;&lt;/a>&lt;/li>
             &lt;/ul>
         &lt;/nav>
    </pre>

</div>
</body>
</html>